<template>
    <div class="box" >
        <div class="login_head" >
        <router-link to="/Register" class="head_Register" >注册</router-link>
        </div>
        <div class="login_body" ref="vantaRef">
            <div class="login_body_login">
                <div class="word">欢迎登录</div>
                <div class="login_input">
                    <el-input placeholder="请输入账号" clearable size="medium" class="input" v-model="account"> </el-input>
                    <el-input placeholder="请输入密码"  show-password size="medium" v-model="password"></el-input>
                </div>
                <div class="login_button">
                    <el-button size="small" round @click="register">注册</el-button>
                    <el-button size="small" round @click="login">登录</el-button>
                </div>
                <div class="touming"></div>
            </div>
        </div>
        <!-- <div class="touming"></div> -->
   
    </div>
</template>
<script>
import * as THREE from 'three'//导入样式
import BIRDS from 'vanta/src/vanta.birds'
// import vantaBirds from 'vanta/src/vanta.birds'
import NET from "vanta/src/vanta.net";
import FOG from "vanta/src/vanta.fog";

// import Net from '/vanta/src/vanta.net'
export default{
    data(){
        return{
            account:"",
            password:"",
            init_number:8,
            session:"",
            sessionData:""
        }
    },
    mounted(){
        this.vantaEffect = FOG({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.FOG({
      el: this.$refs.vantaRef,
      /*以下为样式配置*/
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      highlightColor: 0xa577be,
      midtoneColor: 0xcd4841,
      lowlightColor: 0x473b6b,
      baseColor: 0xdfe3e1,
      blurFactor: 0.52,
      speed: 3.0,
      zoom: 0.3,
    
    });
    },
    beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
   },
    methods:{
        login(){
            // this.$router.push({
            //     path:'/Index',
            // })
            // sessionStorage.setItem("ismaind",JSON.stringify(1))
            this.axios.get('http://192.168.43.171:8081/login', {
                params:{
                 userId: this.account,        // 参数 id
                 psWord: this.password,
                }
         }).then( (response)=> {
                    console.log(response.data);
                    // sessionStorage.setItem("ismaind",JSON.stringify(1))
                    if (response.data.data!=null) {
                        sessionStorage.setItem("userId",JSON.stringify(response.data.data.userId))
                        sessionStorage.setItem("psWord",JSON.stringify(response.data.data.psWord))
                        sessionStorage.setItem("usrName",JSON.stringify(response.data.data.userName))
                        sessionStorage.setItem("email",JSON.stringify(response.data.data.email))
                        sessionStorage.setItem("gender",JSON.stringify(response.data.data.gender))
                        sessionStorage.setItem("phone",JSON.stringify(response.data.data.phone))
                        sessionStorage.setItem("ismaind",JSON.stringify(response.data.data.ismaind))
                        this.$router.push({
                path:'/Index',
            })
                    } else {
                        this.$message({
                     message: response.data.msg,
                      type: 'warning'
                      });
                    }
                    
                  }).catch(function (error) {
                    console.log(error);
                  });
        },          
         register(){
            this.$router.push({ name: 'Register'})
        }

    }
}

</script>
  
<style lang="less">
.box{
    width: 100%;
    height: 100%;
    position: relative;

    .login_head{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 40px;
        z-index: 3;
        background-color: rgb(52, 49, 49);
        .head_Register{
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 10px;
            color: aliceblue;
            background-color: rgb(52, 49, 49);
        }
    }
    .login_body{
        z-index: 1;
        position: relative;
        width: 100%;
        height: 100%;
        // background-image: url("../assets/01.jpg@1280w_1l_2o_100sh.jpg");
        .login_body_login{
            border-radius: 1opx;
            width: 300px;
            height: 250px;
            position: absolute;
            // padding: 20px;
            top: 50%;
            left: 50%;
            border-radius: 12px;
            z-index: 8;
            // background-color:rgba(255, 255,255,0.7 );

            // background-color: #fff;
            border-style:solid;
            border-width: 0.1px;
            border-color: rgba(79, 78, 76,0.3);
            // 
            // letter-spacing: 0.5em;
            box-shadow: 0 0 30px 10px rgba(0, 0, 0,0.3);
            backdrop-filter: blur(100px);
            // opacity: 0.9;

            transform: translate(-50%,-50%);
            .word{
                    position: absolute;
                    top: 18px;
                    left: 97px;
                    // opacity: 1.0;
                    font-size: 24px;
                }
            .login_input{
                position: absolute;
                padding: 20px;
                top: 50px;

                // opacity: 1.0;
                .input{
                    margin-bottom: 20px;
                }
            }
            .login_button{
                position: absolute;
                bottom: 30px;
                left: 85px;
                // opacity: 1.0;
            }
        }
    }
   
}
</style>